<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src='lib/webgl-utils.js'></script>
    <script src='lib/webgl-debug.js'></script>
    <script src='lib/cuon-utils.js'></script>
</head>
<body onload="main()">
<canvas id="mybox" width="500" height="500">
    请更换新版浏览器查看效果!
</canvas>
<script >
    let VSHADER_SOURCE=`
    attribute vec4 a_position;
    uniform mat4 u_xformMatrix;
    void main(){
        gl_Position=u_xformMatrix*a_position;
    }`;
    let FSHADER_SOURCE=`
    void main(){
        gl_FragColor=vec4(1.0,1.0,0.3,1.0);
    }`;
    let ANGLE=90;
    function main(){
        let canvas=document.getElementById('mybox')
        let gl=getWebGLContext(canvas)
        if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){
            console.log('初始化shader失败');
            return;
        }
        let n=initVertexBuffers(gl)
        if(n<0){
             console.log('设置顶点位置失败')
        }
        let radian=ANGLE*Math.PI/180.0;
        let cosB=Math.cos(radian)
        let sinB=Math.sin(radian)
        // 按列主序的旋转矩阵
        let xformMatrix=new Float32Array([
            cosB,sinB,0.0,0.0,
            -sinB,cosB,0.0,0.0,
            0.0,0.0,1.0,0.0,
            0.0,0.0,0.0,1.0
            ])
        let u_xformMatrix=gl.getUniformLocation(gl.program,'u_xformMatrix');
        if(u_xformMatrix<0){
            console.log('获取u_xformMartix失败');
            return;
        }
        // v表示可以向着色器传输多个数据值,中间的值必须指定为false
        gl.uniformMatrix4fv(u_xformMatrix,false,xformMatrix);
        gl.clearColor(0.0,0.0,0.0,1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLES,0,n)




    }

    function initVertexBuffers(gl){
        let vertices=new Float32Array([0.0,0.3,   -0.3,0.0,  0.3,0.0])
        let n=3;
        let vertexBuffer=gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer)
        gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW)
        let a_position=gl.getAttribLocation(gl.program,'a_position');
        gl.vertexAttribPointer(a_position,2,gl.FLOAT,false,0,0)
        gl.enableVertexAttribArray(a_position);
        return n;
    }


</script>

</body>
</html>